<template>
  <div class="contact-container">
    <div class="contact-header">
      <p class="contact-description">有任何问题都可以加QQ群联系我们，点击链接即可复制，随时欢迎。</p>
    </div>
    <div class="contact-info">
      <div class="contact-item">
        <h2>QQ群号</h2>
        <p @click="copyText('136072780','QQ群号')">136072780</p>
      </div>
      <div class="contact-item">
        <h2>电子邮箱</h2>
        <p @click="copyText('xiaoboliyaqing0@gmail.com','电子邮箱')">xiaoboliyaqing0@gmail.com</p>
      </div>
      <div class="contact-item">
        <h2>YouTube频道</h2>
        <p @click="copyText('https://www.youtube.com/@Truth_Trader360','YouTube频道')">https://www.youtube.com/@Truth_Trader360</p>
      </div>
    </div>
    <!-- <div class="qr-code-container">
      <h2>Telegram群二维码</h2>
      <img src="https://vvvzhangshuo.oss-cn-shanghai.aliyuncs.com/%E5%8F%8C%E5%90%91%E7%8E%8BAPP%E7%BD%91%E5%9B%BE/telegram-qr.png" alt="Telegram QR Code"/>
    </div> -->
  </div>
</template>

<script>
export default {
  methods: {
    copyText(text,title) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: '复制'+title+'成功',
            icon: 'success',
            duration: 2000
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制'+title+'失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.contact-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 40px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
  text-align: center;
}

.contact-header {
  margin-bottom: 30px;
}

.contact-title {
  font-size: 26px;
  color: #333;
  margin-bottom: 10px;
}

.contact-description {
  font-size: 18px;
  color: #555;
  margin-bottom: 20px;
}

.contact-info {
  margin-bottom: 30px;
}

.contact-item {
  margin-bottom: 20px;
}

.contact-item h2 {
  font-size: 22px;
  color: #333;
  margin-bottom: 5px;
}

.contact-item p {
  font-size: 16px;
  color: #007bff;
  word-break: break-all;
}

.qr-code-container {
  margin-top: 20px;
}

img {
  max-width: 100%;
  height: auto;
}

.qr-description {
  font-size: 18px;
  color: #333;
  margin-top: 12px;
}

</style>
